<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>工人主页</title>
    <link rel="stylesheet" type="text/css" href="../../../css/aui/aui.css" />
    <style>
        html,
        body {
            background: #F4F4F4;
        }
        /*头部用户*/

        .head_background {
            width: 100%;
            height: 10rem;
            background: #0689FB;
            position: absolute;
        }

        .info {
            position: relative;
            background: white;
            width: 95%;
            margin: 0 auto;
            margin-top: 5rem;
            margin-bottom: .75rem;
            border-radius: .5rem;
            box-shadow: 0px .3rem .75rem #E2E2E2;
            padding: .75rem
        }

        .portrait {
            border: .1rem solid white;
            width: 4rem;
            height: 4rem;
            border-radius: 50%;
            overflow: hidden;
            margin: 0 auto;
            margin-top: -2.75rem;
            margin-bottom: .75rem;
        }
        .portrait img{width:100%;height:100%;}

        .grade {
            background: linear-gradient(to right, #FEDE4A, #FE9A46);
            color: white;
            border-radius: 1rem;
            padding: .2rem .75rem;
            display: inline-block;
            position: absolute;
            top: .75rem;
            right: 0.75rem;
            font-size: .75rem;
        }

        .evaluate {
            margin: .75rem 0 0;
        }

        .evaluate img {
            width: .75rem;
            display: inline-block;
            vertical-align: middle;
        }

        .evaluate .serve_info {
            color: #0689FB;
            font-size: .9rem;
        }

        .evaluate .tag {
            color: white;
            background: #0689FB;
            border-radius: .2rem;
            padding: 0 .3rem;
        }

        .evaluate .insure {
            text-align: right;
        }
        .aui-row .site {
          margin-top: 1.5rem !important;
        }

        .evaluate .site img,.evaluate .insure img {
            width: 1rem;
        }

        .evaluate .site p,.evaluate .insure p {
            display: inline-block;
        }
        /*用户信息*/

        .info-tab {
            margin-top: .75rem;
            background: white;
        }

        .info-tab .aui-tab:after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            right: auto;
            top: auto;
            height: 1px;
            width: 100%;
            background-color: #dddddd;
            display: block;
            z-index: 2;
            -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
        }

        .info-tab .aui-tab-item {
            font-size: .85rem;
        }

        .info-tab .tab-item-content {
            margin: .75rem;
        }

        .info-tab .tab-item-content .tab-content {
            display: none;
        }

        .info-tab .tab-item-content .tab-content .item-content {
            margin-top: .75rem;
        }

        .info-tab .tab-item-content .tab-content .item-content:first {
            margin-top: 0;
        }

        .item-content .content {
            margin-left: .5rem;
            margin-top: .3rem;
        }

        .content_box {
            display: flex;
        }

        .content_box .content_left {
            white-space: nowrap;
        }

        .column_h {
            border-left: 0.2rem solid #0689FB;
            padding-left: 0.4rem;
            font-size: .9rem;
        }

        .aui-list {
            background-image: none;
        }

        .aui-list .aui-list-item {
            padding-left: 0;
        }
        [v-clock]{display: none;}
    </style>
</head>

<body>
    <div id="app" v-clock>
        <!-- 头部用户 -->
        <div class="aui-content">
            <div class="head_background"></div>
            <div class="info">
                <div class="portrait"><img :src="detail.headimgurl" /></div>
                <div class="grade">{{detail.work_cate_name}}/{{chnNumChar[detail.work_cate_level]}}级</div>
                <div class="aui-text-center">
                    <h2>{{detail.user_name}}</h2>
                    <p v-if="isMobile === true" @click.stop="call(detail.user_tel)">{{detail.user_tel}}</p>
                    <p v-else>(雇佣成功后可查看联系方式)</p>
                    <p>{{detail.user_introduction}}</p>
                </div>
                <div class="evaluate">
                    <div class="aui-row aui-text-center serve_info">
                        <div class="aui-col-xs-3">{{detail.work_total}}</div>
                        <div class="aui-col-xs-4" style='font-size:0;'>
                            <img src="../../../image/icon/xingxing01.png" alt="" v-for='i in detail.user_star'>
                            <img src="../../../image/icon/xingxing02.png" alt="" v-for='i in detail.no_user_star'>
                        </div>
                        <div class="aui-col-xs-2">{{parseInt(detail.work_score)}}%</div>
                        <div class="aui-col-xs-3"><img src="../../../image/icon/duigou.png" alt=""></div>
                    </div>
                    <div class="aui-row aui-text-center">
                        <div class="aui-col-xs-3">服务次数</div>
                        <div class="aui-col-xs-4">综合星级</div>
                        <div class="aui-col-xs-2">好评率</div>
                        <div class="aui-col-xs-3">实名认证</div>
                    </div>
                </div>
                <div class="evaluate aui-row">
                    <div class="aui-col-xs-4">
                        <img src="../../../image/icon/zhuangtai.png" class="iconimg" alt="">
                        <span class="tag" v-if='detail.is_work == 1'>忙碌中</span>
                        <span class="tag" v-else-if='detail.is_work == 0'>找活中</span>
                    </div>
                    <div class="aui-col-xs-8 insure">
                        <img src="../../../image/icon/denglu03.png" alt="">
                        <p v-if='detail.is_insure == 1'>已交众筹金</p>
                        <p v-else-if='detail.is_insure == 0'>未交众筹金</p>
                    </div>
                    <div class="aui-col-xs-12 site">
                        <img src="../../../image/icon/daohang.png" alt="">
                        <p>{{detail.region}}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 用户信息 -->
        <div class="aui-content info-tab">
            <div class="aui-tab" id="tab">
                <div class="aui-tab-item aui-active">个人信息</div>
                <div class="aui-tab-item">案例展示</div>
                <div class="aui-tab-item">雇主评价</div>
            </div>
            <div class="tab-item-content">
                <div class="tab-content" style="display:blcok;">
                    <div class="item-content">
                        <div class="column_h">基本信息</div>
                        <div class="content">
                            <div class="content_box">
                                <h4 class="content_left">姓名：</h4>
                                <h4 class="content_right">{{detail.user_name}}</h4>
                            </div>
                            <div class="content_box">
                                <h4 class="content_left">性别：</h4>
                                <h4 class="content_right">
                                  <template v-if="detail.user_sex == 1">男</template>
                                  <template v-if="detail.user_sex == 2">女</template>
                                </h4>
                            </div>
                            <div class="content_box">
                                <h4 class="content_left">年龄：</h4>
                                <h4 class="content_right">{{detail.user_age}}</h4>
                            </div>
                            <div class="content_box">
                                <h4 class="content_left">所在地：</h4>
                                <h4 class="content_right">{{detail.region}}</h4>
                            </div>
                            <div class="content_box">
                                <h4 class="content_left">工种名称：</h4>
                                <h4 class="content_right">{{detail.work_cate_name}}</h4>
                            </div>
                        </div>
                    </div>
                    <div class="item-content">
                        <div class="column_h">服务信息</div>
                        <div class="content">
                            <div class="content_box">
                                <h4 class="content_left">服务区域：</h4>
                                <h4 class="content_right">{{detail.service_region}}</h4>
                            </div>
                            <div class="content_box">
                                <h4 class="content_left">服务项目：</h4>
                                <h4 class="content_right">{{detail.service_project}}</h4>
                            </div>
                            <div class="content_box">
                                <h4 class="content_left">服务承诺：</h4>
                                <h4 class="content_right">{{detail.service_commitment}}</h4>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="tab-content">
                    <div class="aui-content" v-for='data in userCase'>
                        <div class="content_box">
                            <h4 class="content_left">施工项目：</h4>
                            <h4 class="content_right">{{data.service_project}}</h4>
                        </div>
                        <div class="content_box">
                            <h4 class="content_left">服务地点：</h4>
                            <h4 class="content_right">{{data.service_address}}</h4>
                        </div>
                        <div class="content_box">
                            <h4 class="content_left">服务时间：</h4>
                            <h4 class="content_right">{{data.service_date}}</h4>
                        </div>
                        <div class="aui-row-padded">
                            <div class="aui-col-xs-4" v-for="img in data.service_image_array"><img :src="img" style="width:100%;height:28vw;" alt=""></div>
                            <div style="clear:both;"></div>
                        </div>
                        <div class="aui-hr" style="margin-top:.5rem;"></div>
                    </div>
                </div>
                <div class="tab-content">
                    <div class="aui-content aui-margin-b-15">
                        <ul class="aui-list">
                            <li class="aui-list-item aui-list-item-middle" @click="evaluate(0)">
                                <div class="aui-list-item-inner aui-list-item-arrow">
                                    <div class="aui-list-item-title">雇主好评：{{detail.goods_comment}}条</div>
                            </li>
                            <li class="aui-list-item" @click="evaluate(1)">
                                <div class="aui-list-item-inner aui-list-item-arrow">
                                    <div class="aui-list-item-title">雇主中评：{{detail.middle_comment}}条</div>
                                </div>
                            </li>
                            <li class="aui-list-item" @click="evaluate(2)">
                                <div class="aui-list-item-inner aui-list-item-arrow">
                                    <div class="aui-list-item-title">雇主差评：{{detail.bad_comment}}条</div>
                                </div>
                            </li>
                        </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="../../../script/api.js" charset="utf-8"></script>
<script src="../../../script/aui/aui-tab.js" charset="utf-8"></script>
<script src="../../../script/common/jquery-3.3.1.min.js" charset="utf-8"></script>
<script src="../../../script/common/common.js" charset="utf-8"></script>
<script src="../../../script/common/config.js" charset="utf-8"></script>
<script src="../../../script/common/vue.min.js" charset="utf-8"></script>
<script>
    apiready = function() {
        api.parseTapmode();
        $(".tab-content").eq(0).show();
        var tab = new auiTab({
            element: document.getElementById("tab"),
            index: 1,
            repeatClick: false
        }, function(ret) {
            if (ret.index == 2) {
                vm.page();
            } else {
                api.removeEventListener({
                    name: 'scrolltobottom'
                });
            }
            $(".tab-content").eq(ret.index - 1).show().siblings(".tab-content").hide();
        });

        vm.init();
    }

    var vm = new Vue({
        el: "#app",
        data: {
            chnNumChar: ["零", "一", "二", "三", "四", "五", "六", "七", "八", "九"],
            userInfo: {},
            detail: {},
            userCase: [],
            pages: 1,
            isMobile: false,
        },
        methods: {
            init() {
                this.userInfo = get_local('userInfo');
                if (api.pageParam.isMobile === true) {
                    this.isMobile = true;
                }

                this.getDetail();
                this.getUserCase();
            },
            getDetail() {
                var self = this;
                _ajax(Config.api.UserGetDetail, {
                    user_id: api.pageParam.id,
                    app_user_id: self.userInfo.user_id
                }, function(res) {
                    if (res.code === 200) {
                        res.data.no_user_star = 5 - res.data.user_star;
                        self.detail = res.data;

                        self.updateCollectStatus(self.detail.is_collect);
                    }
                })
            },
            getUserCase() {
                var self = this;
                _ajax(Config.api.UserCaseLists, {
                    user_id: api.pageParam.id,
                    pages: self.pages
                }, function(res) {
                    if (res.code === 200) {
                        if (res.data.length === 0) {
                            self.pages = -1;
                        } else {
                            self.userCase = self.userCase.concat(res.data);
                        }
                    }
                });
            },
            page() {
                var self = this;
                //上拉加载
                push_up(function() {
                    if (self.pages === -1) {
                        $toast('数据已加载完毕');
                    } else {
                        ++self.pages;
                        self.getUserCase();
                    }
                });
            },
            collect() {
                var self = this;
                _ajax(Config.api.UserCollect, {
                    data_id: self.detail.user_id,
                    user_id: self.userInfo.user_id
                }, function(res) {
                    if (res.code === 200) {
                        $toast('收藏成功');
                        self.updateCollectStatus(1);
                    }
                })
            },
            evaluate(i) {
                var cont = this.detail.goods_comment + this.detail.middle_comment + this.detail.bad_comment;
                if (cont == 0) {
                    $toast('暂无评价');
                    return;
                }
                open_w('evaluate_win', './evaluate_win.html', {
                    index: i,
                    id: api.pageParam.id
                });
            },
            updateCollectStatus(status) {
                api.execScript({
                    script: 'isCollect(' + status + ')'
                });
            },
            call(phone) {
                api.call({
                    type: 'tel_prompt',
                    number: phone
                });
            }
        }
    });

    function collect() {
        vm.collect();
    }

    function hire_publish() {
        if (api.pageParam.id == vm.userInfo.user_id) {
            $toast('不可以自己雇佣自己哦!');
            return false;
        }

        if (vm.userInfo.user_status == 2) {
            openWin('hire_publish_win', './hire_publish_win.html', api.pageParam);
        } else {
            $toast('请先完善基本资料');
        }
    }
</script>

</html>
